<template>
  <el-dialog title="采购收货详情" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
		<el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-row style="margin-bottom:15px;">
      <el-link  style="margin-right:15px;" :href="printUrl" target="_blank" type="info"><el-button size="mini" type="info" @click="getPrintParams">打印单据(品牌)</el-button></el-link>
      <el-link  :href="printUrl" target="_blank" type="info"><el-button size="mini" type="info" @click="getGoodsPrintParams">打印单据(商品)</el-button></el-link>
    </el-row>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="90px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单单号" prop="billId">
            <el-input v-model="dataForm.billId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采购类型" prop="ctgId">
            <el-select v-model="dataForm.ctgId" disabled>
              <el-option v-for="item in ctgOptions" :key="item.value" :value="item.value" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="制造商" prop="supplyName">
            <el-input v-model="dataForm.supplyName" disabled></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收入仓位" prop="inStockId">
            <el-select v-model="dataForm.inStockId" disabled>
              <el-option v-for="item in stockOptions" :key="item.value" :value="item.value" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="memo">
            <el-input v-model="dataForm.memo" type="textarea" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form :inline="true">
      <el-form-item><el-button type="info" @click="printBarcode">打印条码</el-button></el-form-item>
      <div class="upload-wrap">
        <input ref="configInput" class="file-ele" id="config" type="file" @change="showConfig(this)"></input>
        <div class="file-open">打印配置</div>
      </div>
    </el-form>
    <!-- 采购商品列表 -->
    <ctg-table @refreshData="handleSelectionChange" ref="ctgTable" :ctgId="dataForm.ctgId" :dataList="dataList" :dataListLoading="dataListLoading" :selectList="selectList" :type="'detail'"></ctg-table>
    <!-- 弹窗，查询选择商品 -->
    <single-search v-if="singleSearchVisible" ref="singleSearch" @updateForm="checkGoods"></single-search>
  </el-dialog>
</template>

<script>
    import {mapGetters} from 'vuex'
  import { receiveGoodsGetObj, receiveGoodsAddObj, receiveGoodsPutObj } from '@/api/eims/purchase/receive-goods'
  import { fetchCtgList } from '@/api/eims/ctg'
  import { getSupplyObj } from '@/api/eims/supply'
  import { fetchStockList } from '@/api/eims/stock'
  import { PrintBarcode } from '@/util/printDs'
  import CtgTable from '@/components/business/ctg-table'

  let params = '/inventoryBrandPrint.cpt&inventoryId='
  let goodsParams = '/inventoryGoodPrint.cpt&inventoryId='

  export default {
    data() {
      return {
        visible: false,
        printUrl:'',
        dataForm: {
          id: 0,
          inStockId: '',
          outStockId: '',
          supplyId: '',
          supplyName: '',
          brandId: '',
          ctgId: '',
          memo: '',
          inveStatus: '1'
        },
        ctgOptions: [],
        stockOptions: [],
        dataRule: {
          inStockId: [{ required: true, message: '入库仓库id不能为空', trigger: 'blur' }],
          outStockId: [{ required: true, message: '出库仓库id不能为空', trigger: 'blur' }],
          supplyName: [{ required: true, message: '制造商不能为空', trigger: 'blur' }],
          ctgId: [{ required: true, message: '商品类别id不能为空', trigger: 'blur' }]
        },
        singleSearchVisible: false,
        dataList: [],
        dataListLoading: false,
        selectList: []
      }
    },
    computed: {
        ...mapGetters(['bizData','userInfo'])
    },
    components: {
      CtgTable
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.getStockList()
        this.getGoodsCtgList()
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            receiveGoodsGetObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
                let list = this.dataForm.detailList
                if(list.length){
                  list.forEach(item => {
                    item.name = item.goodsName
                    item.code = item.goodsCode
                    item.barcode = item.goodsBarcode
                    if(item.invalidTime){
                      item.invalidTimeStr = item.invalidTime.substring(0,10)
                    }
                  })
                }
                this.dataList = list
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      // 获取商品类别列表
      getGoodsCtgList() {
        fetchCtgList().then(response => {
          if(response.data.code == '0'){
            let resultData = response.data.data.records
            let list = []
            resultData.forEach(item => {
              list.push({value:item.id,name:item.name})
            })
            this.ctgOptions = list
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 获取仓位列表
      getStockList() {
        fetchStockList().then(response => {
          if(response.data.code == '0'){
            let resultData = response.data.data.records
            let list = []
            resultData.forEach(item => {
              list.push({value:item.id,name:item.name})
            })
            this.stockOptions = list
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      handleSelectionChange(val) {
        this.selectList = val
      },
      // 配置打印设置
      showConfig(that){
        var _that = this
        var fr=new FileReader();
        var cover=document.getElementById('config').files[0];
        fr.readAsText(cover);
        fr.onload=function(e){
          localStorage.setItem('printData', '')
          localStorage.setItem('printData', this.result)
        }
      },
      // 打印条码
      printBarcode(){
        let that = this
        if(this.selectList.length < 1){
          alert("请钩选要打印的商品条码！");
          return false
        }
				let printData = localStorage.getItem('printData')
				if(printData){
				  this.printConfig = printData
				  this.$confirm('条码打印确认！','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type: 'warning'})
							.then(() => {
								console.log('123')
								PrintBarcode(that)
							})
				}else{
				  alert('请配置选择打印配置文件')
				}
      },
      //   获取品牌打印的参数
      getPrintParams(){
          let inventoryId = this.dataForm.id
          this.printUrl = this.bizData.printUrl + params + inventoryId
      },
      //   获取打印的参数
      getGoodsPrintParams(){
          let inventoryId = this.dataForm.id
          this.printUrl = this.bizData.printUrl + goodsParams + inventoryId
      }
    }
  }
</script>

<style scoped>
  .upload-wrap{
    position: relative;
    float: right;
    display: inline-block;
    overflow: hidden;
    border-radius: 3px;
    margin-left: 10px;
  }
  .upload-wrap .file-ele{
    position: absolute;
    top:0;
    right:0;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
  .upload-wrap .file-open{
    width:90px;
    height:30px;
    line-height:30px;
    text-align: center;
    color:#666;
    background-color: #fff;
  }
</style>
